<template>
    <div class="order-list">
      <van-card
        v-for="order in orders"
        :key="order.id"
        :price="formatPrice(order.price)"
        :title="order.title"
        :desc="order.description"
        :thumb="order.thumb"
      >
        <template #tags>
          <van-tag 
            :type="statusTypeMap[order.status] || 'primary'"
            plain
            class="status-tag"
          >
            {{ order.status }}
          </van-tag>
        </template>
      </van-card>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  const props = defineProps({
    orders: {
      type: Array,
      required: true,
      validator: value => value.every(order => 
        order.id && 
        order.title && 
        order.price
      )
    }
  })
  
  const statusTypeMap = {
    '已完成': 'success',
    '配送中': 'warning',
    '已取消': 'danger'
  }
  
  const formatPrice = (price) => {
    return `¥${Number(price).toFixed(2)}`
  }
  </script>
  
  <style lang="scss" scoped>
  .order-list {
    .van-card {
      margin: 0;
      border-radius: 0;
  
      &::after {
        border-bottom: 1px solid var(--van-gray-3);
      }
  
      &:last-child::after {
        border: none;
      }
  
      :deep(.van-card__content) {
        min-height: 80px;
      }
  
      .status-tag {
        margin-top: 8px;
      }
  
      :deep(.van-card__price) {
        color: var(--van-danger-color);
        font-weight: 600;
      }
    }
  }
  </style>